<script setup>
import api from "./api.js";

const tableData = reactive({
  list: [],
  paging: {
    total: 1,
    pageNum: 1,
    pageSize: 10,
  }
})

function getList() {
  api.list().then(response => {
    tableData.list = response.rows;
    tableData.paging.total = response.total;
  }).catch(error => {
    console.log(error);
  });
}

onMounted(async () => {
  getList();
})

</script>

<template>
  <div style="height: 100%;display: flex;
    flex-direction: column;">
    <div style="flex-grow: 1;">
      <vxe-table height="auto"
                 border="full"
                 ref="tableRef"
                 :column-config="{resizable: true}"
                 :data="tableData.list">
        <vxe-column field="os" title="操作系统"></vxe-column>
        <vxe-column field="loginLocation" title="访问地址"></vxe-column>
        <vxe-column field="ipaddr" title="ip地址"></vxe-column>
        <vxe-column field="loginTime" title="登录时间"></vxe-column>

      </vxe-table>
    </div>
    <div style="height: 50px;">
      <pagination
          v-show="tableData.paging.total>0"
          :total="tableData.paging.total"
          v-model:page="tableData.paging.pageNum"
          v-model:limit="tableData.paging.pageSize"
          @pagination="getList"
      />
    </div>

  </div>



</template>

<style scoped lang="scss">

</style>